<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>
var map;
export default {
  name: 'HomeView',
  components: {

  },
  data() {
    return {

    }
  },
  mounted() {
    this.init()

    // this.createLocationPanel()
  },
  methods: {
    //初始化
    init() {
      minemap.domainUrl = 'https://minemap.minedata.cn';
      minemap.dataDomainUrl = 'https://minemap.minedata.cn';
      minemap.serverDomainUrl = 'https://sd-data.minedata.cn';
      minemap.spriteUrl = 'https://minemap.minedata.cn/minemapapi/v4.0.0/sprite/sprite';
      minemap.serviceUrl = 'https://service.minedata.cn/service';
      minemap.key = "d96c5c33116e4e0f83991d87087b94bb";
      minemap.solution = 1279411188537057280;
      this.$axios({
        method: "get",
        url: window.BASE_URL + "json/mineStyle.json",
        data: {}
      }).then(function (res) {
        map = new minemap.Map({
          container: "map",
          style: res.data,
          center: [104.3971, 31.086],
          zoom: 13,
          pitch: 39, /*俯仰*/
          minPitch: 20,
          bearing: 94, /*旋转*/
          maxZoom: 18.8,
          minZoom: 10,
          projection: 'MERCATOR'
        });
        map.addControl(new minemap.Scale(), "top-left");
        map.repaint = true;
        map.on('load', () => {
          map.atmosphere = true;
          map.atmosphereColor = [0, 0, 0, 0.8];
          //DEM的数据类型为"raster"
          map.setTerrain({
            type: "terrain",
            tiles: ["https://services.minedata.cn/service/data/dem?x={x}&y={y}&z={z}.terrain"], //瓦片服务地址
            tileSize: 512, //瓦片大小
            maxzoom: 14, //dem最高切分zoom，30米一般是14级；12.5米一般是16级
          });
        });
        console.log(minemap)
        console.log(map)
      })


    },
    //飞向
    flyTo() {
      var sceneModel = map.getSceneComponent(tdTilesId);
      map.flyTo({
        center: [104.1, 31.25],
        zoom: 14,
        bearing: 10,
        pitch: 30,
        duration: 1500
      });
    },
    //地点标注
    createLocationPanel(){
      var el = document.createElement("div");
      el.id = "marker";
      el.style["background-image"] = "url('../images/marker.png')";
      el.style["background-size"] = "cover";
      el.style.width = "50px";
      el.style.height = "50px";
      el.style["border-radius"] = "50%";
      el.innerHTML = ``;
      var marker = new minemap.Marker(el, {
        draggable: true,
        anchor: "top-left", //锚点位置(默认值"top-left")，可选值有`'center'`, `'top'`, `'bottom'`, `'left'`, `'right'`, `'top-left'`, `'top-right'`, `'bottom-left'`, and `'bottom-right'`
        color: "lightblue", //默认marker标记的颜色
        rotation: 0, //marker的旋转角度，以锚点作为旋转中心点，顺时针为正
        pitchAlignment: "map", //倾斜对齐参数(默认值是‘auto’)，此值决定marker标记是贴在地图平面上，还是立在地图平面上，当值为`map`时，marker标记贴在地图平面上，当值为`viewport`时，marker标记立在地图平面上，当值为 `auto`时，会根据 `rotationAlignment`参数的值，自动决定.
        rotationAlignment: "map", //旋转对齐参数(默认值是‘auto’)，此值决定地图在旋转的时候，marker标记是否跟随旋转，当值为`map` 时，marker标记会固定在地图平面上，不会跟随地图的旋转而旋转；当值为`viewport`时，marker标记会跟随地图的旋转而旋转，保持正向面对观察者；当值为`auto`时，相当于值`viewport`.
        scale: 1.5, //只有默认标记有这个参数，将默认标记放大1.5倍
      }).setLngLat([104.346, 31.092]).addTo(map);
    },
  },
}
</script>
<style scoped lang="less">
#map {
  width: 100%;
  height: calc(100% + 50px);
}

.home {
  width: 100vw;
  height: 100vh;
  background-color: #161616;
  overflow: hidden;
}
</style>